<template>
  <div>
    <Card style="width:100%" class="detail-content-layout mb16">
      <template #title>
        {{ $t('项目进展情况') }}
      </template>
      <template #extra>
        <div class="h-arrow-wrap" @click="showRecord" style="cursor: pointer;">
          <i style="font-size: 18px;font-weight: bold;" class="iconfont zy-common-beijiancaigou h-arrow-icon"></i>
        </div>
      </template>
      <transition name="slide-up">
        <div class="process">
          <div class="item-wrap" v-for="(item,index) in list" :key="index"
               :class="{active: item.status === 2,before:item.status === 1,after:item.status === 3,isTop: item.isTop,
             isBottom: item.isBottom,isCurrentBottom:item.isCurrentBottom,isCurrentTop:item.isCurrentTop}">
            <div class="label-wrap">
              <div class="line-wrap">
                <div class="status-icon"></div>
                <div class="type-icon"><i :class="`iconfont ${item.icon}`"></i></div>
                <div class="name">{{ item.name }}</div>
              </div>
            </div>
            <div class="content-wrap">
              <div class="left-text" :class="{opacity:item.key.includes('BDG Approval')}">
                {{ $t('提交时间') }}：{{ item.submitTime || '--' }}
              </div>
              <div class="right-text" :class="{
              opacity:(item.key.includes('Spec. In Approval') ||
              item.key.includes('Bidding Approval') ||
              item.key.includes('Spec. Out Approval') ||
              item.key.includes('Contract Sign-off Approval') ||
              item.key.includes('PR Approval') ||
              item.key.includes('Post Calculation Approval'))}">
                {{ $t('审批时间') }}：{{ item.approvalTime || '--' }}
              </div>
            </div>
          </div>
        </div>
      </transition>
    </Card>
    <div class="affix-wrap">
      <i class="iconfont zy-common-jiantou pointer" :class="{active:showIcon}" @click="showIcon=!showIcon"></i>
      <transition name="slide-down">
        <ul v-if="showIcon">
          <li :class="{left: item.status === 1,center: item.status === 2,right: item.status === 3}" class="item-type"
              v-for="(item,index) in list" :key="index" @click="scrollItemPage(item,index===list.length-1)" v-show="item.status !=3">

            <Tooltip placement="left" :content="item.name">
                <i :class="`iconfont ${item.icon}`"></i>
            </Tooltip>
          </li>
        </ul>
      </transition>
    </div>
    <projectRecordModal ref="projectRecordModal"/>
  </div>
</template>

<script>
import mixins from './mixins'
import projectRecordModal from "@/views/devBasic/capex/components/projectRecordModal";

export default {
  name: "process",
  mixins: [mixins],
  props:['info'],
  components: {projectRecordModal},
  data() {
    return {
      list: [],
      showIcon: false,
      isStart: false,
      active: "",
      isEnd: false
    }
  },
  computed: {
    processSchedule: function () {
      return this.$store.state.capexProcessSchedule
    }
  },
  watch: {
    processSchedule: function (val) {

      let {active, flows, isEnd, render, satIsRequired, twoPaymentBeforeCat} = val;
      this.isEnd = isEnd
      if (render) {
        let list = this.formatProcessList(active, flows, isEnd, satIsRequired, twoPaymentBeforeCat)

        this.active = active
        this.list = list
        if (!isEnd && !this.isStart) {
          this.isStart = true
          this.$nextTick(() => {
            setTimeout(() => {
              const obj = list.find(item => item.key.includes(active))
              this.scrollItemPage(obj,true)
            }, 500)
          })
        }
      }
    }
  },
  created() {
  },
  methods: {
      getElementTop (el) {
          let actualTop = el.offsetTop
          let current = el.offsetParent
          while (current !== null) {
              actualTop += current.offsetTop
              current = current.offsetParent
          }
          return actualTop
      },
    scrollItemPage(item,bl) {
      let ele = item.cKey;
      if (bl)
      {
        if (this.active.toLowerCase().indexOf('approval') >= 0) {
          if (ele.indexOf('1') > -1 || ele.indexOf('2') > -1 || ele.indexOf('3') > -1){
            const len = ele.length;
            const cacheEleStr = ele;
            ele = cacheEleStr.slice(0, len-1) + 'Approval' + cacheEleStr.slice(len-1)
          }else{
            ele = ele + 'Approval'
          }
        }
      }

      // const top = document.getElementById(ele).offsetTop
        const top =  this.getElementTop(document.getElementById(ele))


      window.scroll(0, top - 150)
    },
    showRecord() {
      this.$refs.projectRecordModal.showModal({isEnd:this.isEnd,...this.info})
    }
  }
}
</script>

<style scoped lang="scss">
.opacity {
  opacity: 0;
}

.process {
  .item-wrap {
    margin-left: 16px;
    background: rgba(3, 91, 236, 0.06);
    //border-radius: 4px;
    width: 80%;
    padding-right: 16px;
    padding-top: 8px;
    position: relative;
    min-height: 40px;
    width: calc(100% - 16px);

    &:last-child {
      padding-bottom: 16px;
      border-radius: 0px 0px 4px 4px;

      &:before {
        border-radius: 0px 0px 4px 4px;
      }
    }

    &:first-child {
      border-radius: 4px 4px 0px 0px;

      &:before {
        border-radius: 4px 4px 0px 0px;
      }
    }

    .line-wrap {
      display: inline-block;
      //border-bottom: rgba(3, 91, 236, 0.15) solid 1px;
      position: relative;
      line-height: 40px;

      &:before {
        content: "";
        display: inline-block;
        width: calc(100% + 32px);
        position: absolute;
        left: -32px;
        bottom: 0;
        height: 1px;
        background: rgba(3, 91, 236, 0.15);
      }
    }

    .label-wrap {
      width: 251px;
      display: inline-block;
      padding-left: 16px;
      vertical-align: top;

      .status-icon {
        width: 24px;
        height: 24px;
        background: #035BEC;
        border-radius: 2px;
        display: inline-block;
        margin-right: 16px;
        background: url("../../../../assets/images/process/a1.png") center center no-repeat;
        background-size: 100% 100%;
        vertical-align: sub;
      }

      .type-icon {
        width: 32px;
        height: 32px;
        background: rgb(228, 238, 253);
        border-radius: 50%;
        display: inline-block;
        margin-right: 16px;
        vertical-align: top;
        border: rgb(149, 186, 246) solid 1px;
        text-align: center;
        line-height: 32px;
      }

      .name {
        font-size: 16px;
        color: rgba(51, 65, 100, 0.85);
        display: inline-block;
        line-height: 1;
        font-weight: bold;
        vertical-align: top;
        padding-top: 10px;
      }
    }

    .content-wrap {
      display: inline-block;
      width: calc(100% - 251px);
    }

    &:nth-child(1) {
      padding-top: 20px;
    }

    .content-wrap {
      background: url("../../../../assets/images/process/p2.png") center center no-repeat;
      background-size: 100% 100%;
      height: 40px;

      .left-text {
        padding-left: 56px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 65, 100, 0.85);
        line-height: 40px;
        display: inline-block;
        min-width: 300px;
      }

      .right-text {
        padding-left: 330px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 65, 100, 0.85);
        line-height: 40px;
        display: inline-block;
      }
    }

    &:nth-child(odd) {
      .content-wrap {
        background: url("../../../../assets/images/process/p6.png") center center no-repeat;
        background-size: 100% 100%;
        height: 40px;
      }
    }

    &:nth-child(even) {
      .content-wrap {
        background: url("../../../../assets/images/process/p1.png") center center no-repeat;
        background-size: 100% 100%;
        height: 40px;
      }
    }

    &:before {
      content: "";
      display: inline-block;
      background: #035BEC;
      //border-radius: 4px 4px 0px 0px;
      position: absolute;
      left: -16px;
      top: 0px;
      width: 8px;
      height: 100%;
    }

    &.before {
      &:last-child {
        padding-bottom: 16px;
      }

      &:first-child {

        &:before {
          border-radius: 4px 4px 0px 0px;
        }
      }

    }

    &.active {
      border-radius: 4px;

      &:before {
        background: #00E6F4;;
        height: calc(100% + 16px);
        top: -8px;
      }

      margin-top: 16px;
      margin-bottom: 16px;
      height: 72px;
      padding-top: 16px;
      background: rgba(0, 230, 244, 0.06);

      &.isCurrentTop {
        &:before {
          height: calc(100% + 8px);
          top: 0;
          border-radius: 4px 4px 0px 0px;
        }
      }

      &.isCurrentBottom {
        margin-bottom: 0px;

        &:before {
          height: calc(100% + 8px);
          top: -8px;
          border-radius: 0px 0px 4px 4px;
        }
      }

      .content-wrap {
        background: url("../../../../assets/images/process/p3.png") center center no-repeat;
        background-size: 100% 100%;
      }

      .label-wrap {
        .line-wrap {
          &:before {
            background: rgba(0, 230, 244, 0.15);
          }
        }

        .type-icon {
          border-color: rgb(144, 244, 250);
          background: rgb(227, 253, 254);
        }

        .status-icon {
          background: url("../../../../assets/images/process/a2.png") center center no-repeat;
          background-size: 100% auto;
        }
      }

    }

    &.after {
      background: rgba(131, 150, 181, 0.07);

      &:last-child {
        &:before {
          border-radius: 0px 0px 4px 4px;
        }
      }

      &:before {
        background: rgba(51, 65, 100, 0.5);
      }

      &:nth-child(odd) {
        .content-wrap {
          background: url("../../../../assets/images/process/p5.png") center center no-repeat;
          background-size: 100% 100%;
          height: 40px;
        }
      }

      &:nth-child(even) {
        .content-wrap {
          background: url("../../../../assets/images/process/p2.png") center center no-repeat;
          background-size: 100% 100%;
          height: 40px;
        }
      }

      .label-wrap {
        .line-wrap {
          &:before {
            background: rgba(153, 160, 177, 0.15);
          }
        }
      }

      .type-icon {
        border-color: rgb(167, 173, 189);
        background: rgb(236, 238, 242);
      }

      .status-icon {
        background: url("../../../../assets/images/process/a3.png") center center no-repeat;
        background-size: 100% auto;
      }
    }

    &.isTop {
      padding-bottom: 16px;
      border-radius: 0px 0px 4px 4px;

      &:before {
        height: calc(100% + 8px);
      }
    }

    &.isBottom {
      padding-top: 16px;
      border-radius: 4px 4px 0px 0px;

      &:before {
        height: calc(100% + 8px);
        top: -8px;
      }
    }
  }

  .pt16 {
    padding-top: 16px;
  }

  .pb16 {
    padding-bottom: 16px;
  }
}

.affix-wrap {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 11;

  .pointer {
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #035beb;
    font-size: 30px;
    text-align: center;
    line-height: 45px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    transform: rotate(180deg);

    &.active {
      transform: rotate(0);
    }
  }

  ul {
    width: 32px;
    margin: 0 auto;
    position: absolute;
    bottom: 45px;
    left: 6px;
  }

  .left {
    background: #035BEC;
    color: #fff;
  }

  .center {
    background: rgb(0, 230, 244);
    color: #fff;
  }

  .item-type {
    width: 32px;
    height: 32px;
    //background: #e4eefd;
    border-radius: 50%;
    display: inline-block;
    margin-right: 16px;
    vertical-align: top;
    border: #95baf6 solid 1px;
    text-align: center;
    line-height: 32px;
    margin-bottom: 5px;
    cursor: pointer;
  }
}
</style>
